<!--  -->
<template>
  <Card>
    <!-- <tree-select :isShow="true"></tree-select> -->

    <Layout>
      <Content>
        <Select v-model="searchKey" class="search-col1">
          <Option
            v-for="item in columns1"
            v-if="item.key !== 'action' && item.key !== 'aa'"
            :value="item.key"
            :key="`search-col1-${item.key}`"
            >{{ item.title }}</Option
          >
        </Select>
        <template v-if="searchKey === 'content'">
          <Input
            v-model="ser"
            placeholder="请输入关键字"
            style="width: 200px"
          />
        </template>
        <template v-if="searchKey === 'created'">
          <DatePicker
            type="daterange"
            v-model="ser"
            @on-change="handelChange"
            placeholder="选择时间范围"
            style="width: 200px"
          ></DatePicker>
        </template>
        <template v-if="searchKey === 'name'">
          <Input
            v-model="ser"
            placeholder="请输入用户名"
            style="width: 200px"
          />
        </template>
        <template v-if="searchKey === 'hands'">
          <Input v-model="ser" placeholder="请输入数量" style="width: 200px" />
        </template>
        <template v-if="searchKey === 'status'">
          <Select v-model="ser" style="width: 200px">
            <Option v-for="item in data" :value="item.key" :key="item.key">{{
              item.title
            }}</Option>
          </Select>
        </template>
        <template v-if="searchKey === 'ustatus'">
          <Select v-model="ser" style="width: 200px">
            <Option v-for="item in data" :value="item.key" :key="item.key">{{
              item.title
            }}</Option>
          </Select>
        </template>
        <template v-if="searchKey === 'isShow'">
          <Select v-model="ser" style="width: 200px">
            <Option v-for="item in data1" :value="item.key" :key="item.key">{{
              item.title
            }}</Option>
          </Select>
        </template>
        <template v-if="searchKey === 'isRead'">
          <Select v-model="ser" style="width: 200px">
            <Option v-for="item in data1" :value="item.key" :key="item.key">{{
              item.title
            }}</Option>
          </Select>
        </template>
        <Button class="search-btn" type="primary" @click="serch">搜索</Button>
        <Button class="search-btn" type="primary" @click="clear">清空</Button>
        <Table
          height="568"
          class="table"
          width="1600"
          stripe
          :columns="columns1"
          :data="historyData"
          :total="20"
          @on-selection-change="isselectd"
        >
          <!-- <template slot-scope="{ row }" slot="post">
            <span v-for="(item, index) in row.post" :key="index + 'row'">
              {{ item.status === 1 ? '已结' : '未结' }}
            </span>
          </template> -->
          <!-- <template slot-scope="{ row }" slot="status">
            <span v-for="(item, index) in row.cuid.status" :key="index + 'row'">
              {{ item.status === 0 ? '正常' : '异常' }}
            </span>
          </template> -->
        </Table>
        <Page
          :total="list.length"
          size="small"
          :current="pagenum"
          :page-size="pageSize"
          @on-change="changepage"
          show-elevator
          show-sizer
          class="total"
        />
        <Button type="primary" @click="del" :disabled="this.id.length == 0"
          >批量删除</Button
        >
        <Modal
          v-model="modal"
          title="编辑内容"
          @on-ok="determine"
          @on-cancel="cancel"
          size="large"
        >
          <Layout>
            <div class="content">
              <div class="title">标题</div>
              <span
                ><Input
                  style="width: 300px"
                  v-model="Content.title"
                  disabled
                  placeholder="Enter something..."
              /></span>
            </div>
            <div class="content">
              <div class="title">帖子状态</div>
              <span
                ><RadioGroup v-model="tmocontent.status">
                  <Radio label="0">
                    <span>允许回复</span>
                  </Radio>
                  <Radio label="1">
                    <span>禁止回复</span>
                  </Radio>
                </RadioGroup></span
              >
            </div>
            <div class="content">
              <div class="title">用户</div>
              <span
                ><Input
                  style="width: 300px"
                  v-model="ucontent.name"
                  disabled
                  placeholder="Enter something..."
              /></span>
            </div>
            <div class="content">
              <div class="title">用户状态</div>
              <span
                ><RadioGroup v-model="umocontent.status">
                  <Radio label="0">
                    <span>正常</span>
                  </Radio>
                  <Radio label="1">
                    <span>禁言</span>
                  </Radio>
                  <Radio label="2">
                    <span>账号禁用</span>
                  </Radio>
                </RadioGroup></span
              >
            </div>
            <div class="content">
              <div class="title">发表时间</div>
              <DatePicker
                v-model="mocontent.created"
                type="date"
                style="width: 200px"
                disabled
              ></DatePicker>
            </div>
            <div class="content">
              <div class="title">点赞数量</div>
              <span>
                <Input style="width: 380px" v-model="mocontent.hands" />
              </span>
            </div>
            <div class="content">
              <div class="title">是否显示</div>
              <span
                ><RadioGroup v-model="mocontent.isShow">
                  <Radio label="0">
                    <span>是</span>
                  </Radio>
                  <Radio label="1">
                    <span>否</span>
                  </Radio>
                </RadioGroup></span
              >
            </div>
            <div class="content">
              <div class="title">是否已读</div>
              <span
                ><RadioGroup v-model="mocontent.isRead">
                  <Radio label="0">
                    <span>是</span>
                  </Radio>
                  <Radio label="1">
                    <span>否</span>
                  </Radio>
                </RadioGroup></span
              >
            </div>
            <div class="content">
              <div class="title">是否已采纳</div>
              <span
                ><RadioGroup v-model="mocontent.isBest">
                  <Radio label="1">
                    <span>是</span>
                  </Radio>
                  <Radio label="0">
                    <span>否</span>
                  </Radio>
                </RadioGroup></span
              >
            </div>
            <div class="content">
              <div class="title">内容</div>
              <span
                ><Input
                  style="width: 380px"
                  v-model="mocontent.content"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="Enter something..."
              /></span>
            </div>
          </Layout>
        </Modal>
      </Content>
    </Layout>
  </Card>
</template>
<script>
import TreeSelect from '@/view/components/tree-select/index.vue'
import { getUserComms, delComm, getSerch } from '@/api/user'
import { save } from '@/api/commit'
import moment from 'moment'
export default {
  name: 'commit',
  components: {
    TreeSelect
  },
  watch: {
    searchKey (newval, oldval) {
      if (newval !== oldval) {
        this.ser = ''
      }
    }
  },
  data () {
    return {
      modal: false,
      Content: '',
      ucontent: '',
      mocontent: '',
      tmocontent: '',
      umocontent: '',
      pagenum: 1,
      pageSize: 10,
      pagetotal: 9,
      historyData: [],
      list: [],
      id: [],
      searchKey: '',
      value: '',
      data: [{
        key: '0',
        title: '正常'
      },
      {
        key: '1',
        title: '异常'
      }],
      data1: [
        {
          key: '1',
          title: '是'
        },
        {
          key: '0',
          title: '否'
        }],
      ser: '',
      columns1: [
        {
          type: 'selection',
          key: 'aa',
          width: 60,
          align: 'center',
          fixed: 'left',
          _checked: true,
          // render: (h, params) => {

          //   return h("selection", {
          //     props: {

          //     },
          //     on: {
          //       click: () => {
          //         this.checkbox(params.index)
          //       }
          //     }
          //   }, selection)
          // }
        },
        {
          title: '评论内容',
          key: 'content',
          width: 500
        },
        {
          title: '发表时间',
          key: 'created',
          sortable: true,
          width: 200,
        },
        {
          title: '用户',
          key: 'name',
          width: 200,
          render: (h, params) => {
            let text = ''
            for (var i in params.row.cuid) {
              text = params.row.cuid.name
            }
            return h("div", {
              props: {
              }
            }, text)
          }
        },
        {
          title: '点赞数量',
          key: 'hands',
          width: 100

        },
        // {
        //   title: '帖子状态',
        //   align: 'center',
        //   slot: 'post',
        //   width: 200

        // },
        {
          title: '帖子状态',
          width: 200,
          key: 'status',
          render: (h, params) => {
            let show = ''
            for (var i in params.row.tid) {
              if (params.row.tid.status === '0') {
                show = '允许回复'
              } else {
                show = '禁止回复'
              }
            }
            return h("div", {
              props: {
              }
            }, show)
          }
        },
        {
          title: '用户状态',
          width: 200,
          key: 'ustatus',
          render: (h, params) => {
            let show = ''
            for (var i in params.row.cuid) {
              if (params.row.cuid.status === '0') {
                show = '正常'
              }
              if (params.row.cuid.status === '1') {
                show = '异常'
              }
              if (params.row.cuid.status === '2') {
                show = '账号禁用'
              }
            }
            return h("div", {
              props: {
              }
            }, show)
          }
        },
        {
          title: '是否显示',
          key: 'isShow',
          width: 200,
          key: 'isShow',
          render: (h, params) => {
            let show = ''
            if (params.row.isShow === '0') {
              show = '是'
            } else {
              show = '否'
            }
            return h("div", {
              props: {}
            }, show)
          }
        },
        {
          title: '是否已读',
          key: 'isRead',
          width: 200,
          render: (h, params) => {
            let read = ''
            if (params.row.isRead === '0') {
              read = '已读'
            } else {
              read = '未读'
            }
            return h("div", {
              props: {}
            }, read)
          }

        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 120,
          render: (h, params) => {
            let icon = 'md-eye-off'
            let size = '20'
            if (params.row.isBest == 0) {
              return h('div', [
                h('icon', {
                  props: {
                    type: 'md-construct',
                    size: 20,
                  },
                  on: {
                    click: () => {
                      this.modal = !this.modal
                      this.Content = params.row.tid
                      this.ucontent = params.row.cuid
                      this.addContent(params.row)
                    }
                  }
                }, 'sz'),
                h('icon', {
                  props: {
                    type: icon,
                    size: size
                  },
                  on: {
                    click: () => {
                      // this.remove(params.index)
                      //变成1
                      params.row.isBest === 1
                    }
                  }
                }, 'del'),
                h('icon', {
                  props: {
                    type: 'ios-trash',
                    size: 20
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                      this.remove(params.row)
                    }
                  }
                }, 'del')
              ]);
            }
          }
        }
      ]
    };
  },

  computed: {},

  mounted () {
    // this.init()
    this.getComments()
  },

  methods: {
    clear () { this.ser = '' },
    addContent (item) {
      let copy = Object.assign({}, item)
      this.mocontent = copy
      this.tmocontent = copy.tid
      this.umocontent = copy.cuid
    },
    determine () {
      // console.log(this.mocontent);
      // console.log(this.tmocontent);
      let sav = {
        tstatus: this.tmocontent.status,
        ustatus: this.umocontent.status,
        hands: this.mocontent.hands,
        isShow: this.mocontent.isShow,
        isRead: this.mocontent.isRead,
        isBest: this.mocontent.isBest,
        content: this.mocontent.content
      }
      console.log('save', sav);
      save(sav).then(res => {
        if (res.cdoe === 200) {
          console.log('res', res);
        }
      })
    },
    cancel () {
      this.modal = false
    },
    changepage (index) {
      let self = this
      let _start = (index - 1) * this.pageSize;
      let _end = index * this.pageSize;
      this.historyData = this.list.slice(_start, _end)
    },
    del () {
      this.$Modal.confirm({
        title: '确认删除',
        content: '确认删除选中数据',
        onOk: () => {
          let ids = ""
          this.id.forEach((e) => {
            ids += e._id + ","
          });
          ids = ids.substring(0, ids.length - 1)
          //请求
          delComm(ids).then(res => {
            if (res.code === 200) {
              this.getComments()
            }
          })
        },
        onCancel: () => {
        }
      });
      //取isselected数据删除

    },
    isselectd (selection) {
      this.id = selection
    },
    remove (row, index) {
      this.$Modal.confirm({
        title: '确认删除',
        content: '确认删除选中数据',
        onOk: () => {
          this.historyData.splice(index, 1)
          let ids = row._id
          delComm(ids).then(res => {
            if (res.code === 200) {
              this.$alert('删除成功')
            }
          })
        },
        onCancel: () => {

        }
      });

    },
    noeye (index) {
      //对数进行操作
      console.log('aa');
      // this.data1.splice(index, !isShow)


      //换图标
    },
    getComments () {
      getUserComms().then(res => {
        if (res.code === 200) {
          let data = res.data
          data.forEach((item) => {
            item.created = moment(item.created).format("YYYY-MM-DD");
          })
          this.list = data
          this.pagetotal = res.length
          if (this.list < this.pageSize) {
            this.historyData = this.list
          } else {
            this.historyData = this.list.slice(0, this.pageSize);
            console.log(this.historyData);
          }
        }
      })
    },
    handleSelectAll (index) {
      console.log(index);
    },
    handelChange (date) {
      this.ser = date

    },
    serch () {
      console.log('sky', this.searchKey);
      console.log(this.ser);
      //请求
      let type = this.searchKey
      let value = this.ser
      getSerch(type, value).then((res) => {
        if (res.code === 200) {
          // this.historyData = res.data
          let data = res.data
          data.forEach((item) => {
            item.created = moment(item.created).format("YYYY-MM-DD");
          })
          this.historyData = data
        }
      })
    }
  }
}

</script>
<style  lang='scss' scope >
.total {
  display: flex;
  float: right;
}
.ivu-icon {
  cursor: pointer;
}
.table {
  margin-bottom: 10px;
  margin-top: 10px;
}
.search-col1 {
  width: 200px;
}

.search-btn {
  margin-left: 5px;
}
.content {
  display: flex;
  margin: 8px 0px;
}
.title {
  width: 100px;
}
</style>